<template>
	<view>
		<view class="courseNaver">
			<view class="left">
				<image src="../../static/images/vidicon.png" mode=""></image>
				<text>进阶学习</text>
			</view>
			<view class="right" @click="goMoreCourse">
				<text>更多</text>
				<image src="../../static/images/rightclick.png" mode=""></image>
			</view>
		</view>

		<scroll-view @scrolltolower="uploadMissioc" scroll-x="true" class="scroll">
			<view class="moreCourse">
				<view @click="articleDetail(item.content.article_content_id)" v-for="(item, index) in hotCourseList" :key="index" class="hotCourse">
					<view class="cardHeader">
						<view class="classroom"><image :src="item.image_input"></image></view>
					</view>
					<view class="watchNum">
						<view class="douyin">
							<view class="basics">{{ item.title }}</view>
							<view class="watch">
								<image src="../../static/images/eye.png"></image>
								<text>{{ item.visit }}人观看</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!hotCourseList.length" class="notAvailable">暂无课程~</view>
		</scroll-view>

		<view class="courseNaver">
			<view class="left">
				<image src="/static/images/strategies.png"></image>
				<text>新手教程</text>
			</view>
			<!-- <view class="right" @click="go2List(21)">
				<text>更多</text>
				<image src="../../static/images/rightclick.png"></image>
			</view> -->
		</view>

		<view class="strategies">
			<view @click="articleDetail(item.content.article_content_id)" v-for="(item, index) in NewStrategList" :key="index" class="strategy">
				<view><image :src="item.image_input" class="strategyVideo"></image></view>
				<view class="strategyDescribe">
					<view class="strategyName">{{ item.title }}</view>
					<view class="btm">
						<view>
							<image src="/static/images/eye.png"></image>
							<text>{{ item.visit }}人观看</text>
						</view>
						<view class="newest">最新</view>
					</view>
				</view>
			</view>
		</view>
		<view class="over_line" v-if="newIsover">----- 我也是有底线的 ------</view>
		<view v-if="!NewStrategList.length" class="notAvailable">暂无攻略~</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			hotCourseList: [],
			NewStrategList: [],
			pagenum: 1, // 页码值
			pagesize: 10, // 每页显示多少条数据
			total: '',
			isover: false, // 判断是否到底部，给用户提示
			isloading: false, // 判断数据是否在加载中
			newPagenum: 1, // 页码值
			newPagesize: 5, // 每页显示多少条数据
			newTotal: '',
			newIsover: false, // 判断是否到底部，给用户提示
			newIsloading: false // 判断数据是否在加载中
		};
	},
	onLoad() {
		this.getHotCourse();
		this.getNewStrategy();
	},
	methods: {
		goMoreCourse() {
			uni.navigateTo({
			    url: '/pages/strategy/course'
			});
		},
		// 获取热门课程 
		getHotCourse() {
			// 正在加载下页数据
			this.isloading = true
			this.$api.getStrategy(23,{
				page: this.pagenum,
				limit: this.pagesize
			}, res => {
				this.total = res.data.count
				this.hotCourseList = [...this.hotCourseList,...res.data.list]
				// 没有在加载下页数据
				this.isloading = false;
			});
		},

		// 获取最新攻略
		getNewStrategy() {
			// 正在加载下页数据
			this.isloading = true
			this.$api.getStrategy(21,{
				page: this.newPagenum,
				limit: this.newPagesize
			}, res => {
				this.newTotal = res.data.count
				this.NewStrategList = [...this.NewStrategList,...res.data.list]
				// 没有在加载下页数据
				this.isloading = false;
			});
		},
		// 查看文章详情
		articleDetail(articleId) {
			this.$common.navigateTo('/pages/strategy/strategy_detail?id=' + articleId + '&id_type=1');
		},
		uploadMissioc() {
			if (!this.hotCourseList.length) {
				return;
			}
			// 判断当前是否正在请求数据中
			if (this.isloading) {
				return;
			}
			if (this.pagesize * this.pagenum >= this.total) {
				this.isover = true;
				return;
			}
			this.pagenum++;
			this.getHotCourse();
		}
	},
	onReachBottom() {
		if (!this.NewStrategList.length) {
			return;
		}
		// 判断当前是否正在请求数据中
		if (this.newIsloading) {
			return;
		}
		if (this.newPagesize * this.newPagenum >= this.newTotal) {
			this.newIsover = true;
			return;
		}
		this.newPagenum++;
		this.getNewStrategy();
	}
};
</script>
<style lang="less">
page {
	background-color: #ffffff;
}
.course {
	text-align: center;
	font-size: 32rpx;
	margin-top: 20rpx;
	margin-bottom: 50rpx;
}
.courseNaver {
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	margin: 20rpx 0;
	.left {
		text {
			font-weight: bold;
		}
		image {
			width: 49rpx;
			height: 46rpx;
			margin-bottom: -10rpx;
			margin-right: 10rpx;
		}
	}
	.right {
		text {
			color: #8b8c8d;
		}
		image {
			width: 15rpx;
			height: 15rpx;
			margin-bottom: 3rpx;
			margin-left: 10rpx;
		}
	}
}

.scroll {
	overflow: hidden;
	white-space: nowrap;
	.moreCourse {
		padding-left: 30rpx;
		.over_line {
			text-align: center;
			background-color: #F5F5F5;
			display: inline-block;
			font-size: 26rpx;
			color: #999;
			padding: 20rpx 0;
		}
		.hotCourse {
			display: inline-block;
			margin-right: 20rpx;
			.cardHeader {
				.classroom {
					position: relative;
					width: 328rpx;
					height: 184rpx;
					border-radius: 15rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.watchNum {
				display: flex;
				padding: 20rpx 0;
				image {
					width: 27rpx;
					height: 19rpx;
					margin-right: 10rpx;
				}
				.basics {
					font-size: 30rpx;
				}
				text {
					font-size: 24rpx;
					font-weight: bold;
				}
				.douyin {
					flex: 1;
					margin-right: 30rpx;
				}
				.huiyuan {
					flex: 1;
				}
			}
		}
	}
	.notAvailable {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 200rpx;
		font-size: 24rpx;
		color: #666;
		margin-top: 200rpx;
	}
}
.strategies {
	.strategy {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		image {
			width: 27rpx;
			height: 19rpx;
			margin-right: 10rpx;
		}
		text {
			font-size: 24rpx;
			color: #b0b1b4;
		}
		.strategyVideo {
			width: 328rpx;
			height: 184rpx;
			/*background: linear-gradient(117deg, #C44F54 0%, #FEADB7 100%);*/
			border-radius: 15rpx;
		}
		.strategyDescribe {
			position: relative;
			width: 328rpx;
			height: 184rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.strategyName {
				font-size: 30rpx;
				color: #2c2b2b;
				margin-top: 15rpx;
			}
			.btm {
				display: flex;
				justify-content: space-between;
				padding-right: 10rpx;
				.newest {
					width: 65rpx;
					height: 35rpx;
					border: 2rpx solid #e06165;
					border-radius: 0rpx 10rpx 0rpx 10rpx;
					font-size: 15rpx;
					text-align: center;
					line-height: 30rpx;
					color: #e06266;
				}
			}
		}
	}
}

.over_line {
	text-align: center;
	background-color: #F5F5F5;
	font-size: 26rpx;
	color: #999;
	padding: 20rpx 0;
}

.notAvailable {
	width: 100%;
	height: 150rpx;
	text-align: center;
	line-height: 200rpx;
	font-size: 24rpx;
	color: #666;
	margin-top: 200rpx;
}
</style>
